<template>
   <div class="person">
    姓: <input type="text" v-model="firstName"><br>
    名: <input type="text" v-model="lastName"><br>
    全名: <input type="text" v-model="fullName"> <br>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import { ref , computed} from 'vue'
    let firstName = ref('张')
    let lastName = ref('三')

    // 这个定义的fullName是一个计算属性,且是只读的
    // let fullName = computed(()=>{
    //     console.log(1)
    //     return firstName.value.slice(0,1).toLocaleUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    // })

    // function 和 computed 的区别
    // 1.函数没有缓存 计算属性有缓存

    let fullName = computed({
        get(){
            return firstName.value.slice(0,1).toLocaleUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        // set值 监听修改后的值并且可以被修改
        set(val){
            const [str1,str2] = val.split('-')
            firstName.value = str1
            // lastName.value = str2
            if(str2.length<=0){
                lastName.value = ''
            }else{
                lastName.value = str2
            }
            console.log(val)
        }
    })
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>